{% extends "base.html" %}

{% block content %}
<style>
/* 液态玻璃页面标题 */
.page-title {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.page-title h2 {
    color: #1C1C1E !important;
    text-shadow: 0 2px 4px rgba(0, 122, 255, 0.1);
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 1.5rem;
}

/* 液态玻璃表格容器 */
.table-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    box-shadow: var(--glass-shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.table-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.table-responsive {
    position: relative;
    z-index: 1;
}

/* 液态玻璃表格 */
.table {
    background: transparent !important;
    color: #1C1C1E !important;
    margin-bottom: 0;
}

.table thead th {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border-color: var(--glass-border) !important;
    color: #1C1C1E !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--glass-border) !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.table thead th::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.table tbody td {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    transition: var(--transition) !important;
    position: relative;
    z-index: 1;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transition: var(--transition) !important;
}

/* 液态玻璃复选框 */
.form-check-input {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

.form-check-input:checked {
    background: rgba(0, 122, 255, 0.8) !important;
    border-color: rgba(0, 122, 255, 0.8) !important;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.1) !important;
}

/* 液态玻璃徽章 */
.badge {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    font-weight: 600 !important;
    transition: var(--transition) !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
}

.badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-1px);
}

/* 液态玻璃按钮 */
.btn {
    backdrop-filter: var(--glass-blur-light) !important;
    -webkit-backdrop-filter: var(--glass-blur-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: var(--transition) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #1C1C1E !important;
    padding: 0.5rem 1rem !important;
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
}

.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-danger {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
}

.btn-outline-danger:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #1C1C1E !important;
}

.btn-outline-danger:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(28, 28, 30, 0.5) !important;
    cursor: not-allowed !important;
}

/* 操作按钮区域 */
.action-buttons {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
}

.action-buttons::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

.action-buttons .d-flex {
    position: relative;
    z-index: 1;
}

/* 暗色模式适配 */
[data-theme="dark"] .page-title {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .page-title::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .page-title h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .table-container {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .table-container::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .table {
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table thead th::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

[data-theme="dark"] .table tbody td {
    color: #ffffff !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .form-check-input {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .btn-primary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-secondary {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-danger {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-danger:disabled {
    background: rgba(0, 0, 0, 0.2) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .action-buttons {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .action-buttons::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}
</style>

<div class="container">
    <!-- 页面标题 -->
    <div class="page-title">
        <h2><i class="fas fa-list-alt me-2"></i>任务执行日志 - {{ task.name }}</h2>
    </div>
    
    <!-- 表格容器 -->
    <div class="table-container">
    <div class="table-responsive">
            <table class="table table-hover">
            <thead>
                <tr>
                        <th><input type="checkbox" id="selectAll" class="form-check-input"></th>
                        <th><i class="fas fa-clock me-1"></i>执行时间</th>
                        <th><i class="fas fa-stopwatch me-1"></i>持续时间</th>
                        <th><i class="fas fa-info-circle me-1"></i>状态</th>
                        <th><i class="fas fa-tag me-1"></i>日志类型</th>
                        <th><i class="fas fa-cogs me-1"></i>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for log in logs %}
                <tr>
                        <td><input type="checkbox" class="log-checkbox form-check-input" value="{{ log.id }}"></td>
                    <td>{{ log.start_time.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                    <td>{% if log.duration is not none %}{{ "%.2f"|format(log.duration) }}秒{% else %}--{% endif %}</td>
                    <td>
                        <span class="badge bg-{% if log.status == '成功' or log.status == 'success' %}success{% elif log.status == '失败' or log.status == 'error' %}danger{% else %}warning{% endif %}">
                                <i class="fas fa-{% if log.status == '成功' or log.status == 'success' %}check-circle{% elif log.status == '失败' or log.status == 'error' %}times-circle{% else %}exclamation-circle{% endif %} me-1"></i>
                            {{ '成功' if log.status == 'success' else '失败' if log.status == 'error' else log.status }}
                        </span>
                    </td>
                    <td>
                        <span class="badge bg-{% if log.log_type == 'system_log' %}danger{% elif log.log_type == 'dingtalk_log' %}warning{% else %}info{% endif %}">
                                <i class="fas fa-{% if log.log_type == 'system_log' %}server{% elif log.log_type == 'dingtalk_log' %}robot{% else %}file-alt{% endif %} me-1"></i>
                            {{ '系统日志' if log.log_type == 'system_log' else '钉钉机器人日志' if log.log_type == 'dingtalk_log' else '脚本执行日志' }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ url_for('task_log_detail', log_id=log.id) }}" class="btn btn-sm btn-primary">
                                <i class="fas fa-eye me-1"></i>查看详情
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
</div>
</div>
    
    <!-- 操作按钮区域 -->
    <div class="action-buttons">
        <div class="d-flex justify-content-end">
        <a href="{{ url_for('scheduled_tasks') }}" class="btn btn-outline-secondary me-2">
                <i class="fas fa-arrow-left me-1"></i>返回任务列表
        </a>
        <button class="btn btn-outline-danger" id="deleteLogsBtn" disabled>
                <i class="fas fa-trash me-1"></i>批量删除
        </button>
        </div>
    </div>
    </div>
    
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectAll = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.log-checkbox');
        const deleteBtn = document.getElementById('deleteLogsBtn');
        
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
            updateDeleteBtnState();
        });
        
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', updateDeleteBtnState);
        });
        
        function updateDeleteBtnState() {
            const checkedCount = document.querySelectorAll('.log-checkbox:checked').length;
            deleteBtn.disabled = checkedCount === 0;
        }
        
        deleteBtn.addEventListener('click', function() {
            const checkedLogs = Array.from(document.querySelectorAll('.log-checkbox:checked')).map(cb => cb.value);
            if(checkedLogs.length > 0 && confirm(`确定要删除选中的${checkedLogs.length}条日志吗？`)) {
                fetch(`{{ url_for('delete_logs_page') }}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        log_ids: checkedLogs
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if(data.success) {
                        // 显示成功消息
                        alert(data.message);
                        // 刷新页面
                        window.location.reload();
                    } else {
                        // 显示错误消息
                        alert('删除失败: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('删除日志出错:', error);
                    alert('删除操作失败，请稍后重试');
                });
            }
        });
    });
    </script>
{% endblock %}